<template>
  <div>
    <TopHeader @back="headerBack" @share="headerShare"></TopHeader>
    <div class="book-detail p-3">
      <BookDetailBox :info="bookInfo"></BookDetailBox>
      <van-tabs v-model:active="activeTab" animated :color="'rgba(72, 50, 220, 1)'" line-height="2px">
        <van-tab v-for="item in tabList" :title="item.title" :key="item.id">
          <div v-show="activeTab === 0" class="p-3">
            <div style="height: 80px;" class="bg-gray-100 grid grid-cols-3">
              <div class="flex items-center justify-center flex-column text-sm">
                评分
                <div class="mt-2">
                  <span class="text-2xl font-bold">{{ bookInfo.score }}</span>分
                </div>
              </div>
              <div class="flex items-center justify-center flex-column text-sm">
                阅读量
                <div class="mt-2">
          <span class="text-2xl font-bold">{{
              bookInfo.readVolume
            }}</span>万人
                </div>
              </div>
              <div class="flex items-center justify-center flex-column text-sm">字数
                <div class="mt-2">
                  <span class="text-2xl font-bold">{{ bookInfo.bookNumber }}</span>万字
                </div>
              </div>
            </div>
            <div class="mt-2 whitespace-pre-line text-sm">
              {{ bookInfo.remark }}
            </div>
            <div class="flex items-center justify-between pt-4">
              <div class="title-text font-bold text-center">
                活跃书友
              </div>
              <van-button plain round hairline type="primary" class="button-right" size="'small'" color="black">查看全部
              </van-button>
            </div>
            <div class="flex items-center mt-3 justify-center">
              <div v-for="item in userList" :key="item.id" class="flex-1 text-center">
                <img :src="item.imgSrc" alt="" class="user-image">
                <span class="txtover1 text-xs mt-1">{{ item.nickName }}</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="fixed w-full bottom-0 flex items-center justify-around  bg-white py-3 px-5" v-if="activeTab === 0">
      <div class="text-sm">
        <i class="iconfont icon-APP_xiazai font-bold"></i>下载
      </div>
      <div class="text-sm read-book text-white" @click="routerLink('/read-book')">
        立即阅读
      </div>
      <div class="text-sm" @click="openListen">
        <i class="iconfont icon-yueduqi_tingshu font-bold"></i>听书
      </div>
    </div>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="shareOptions"
        @select="onShareSelect"
    />
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs, ref} from "vue";
import {useRouter} from "vue-router";
import png1 from '../assets/image/31.jpg'

const activeTab = ref(0)
const router = useRouter()
const reactiveData = reactive(
    {
      bookInfo: {},
      tabList: [
        {
          id: 1,
          title: '书籍介绍'
        },
        {
          id: 2,
          title: '作家主页'
        },
        {
          id: 3,
          title: '作品荣誉'
        },
        {
          id: 4,
          title: '全部评论'
        },
      ],
      userList: [
        {
          id: 1,
          imgSrc: 'https://p.qqan.com/up/2021-10/16339155882180036.jpg',
          nickName: '潘文博'
        },
        {
          id: 12,
          imgSrc: 'https://p.qqan.com/up/2021-10/16352107769302473.jpg',
          nickName: 'wang博'
        },
        {
          id: 13,
          imgSrc: 'https://p.qqan.com/up/2021-10/16351256231907575.jpg',
          nickName: 'Timi杰'
        },
        {
          id: 14,
          imgSrc: 'https://p.qqan.com/up/2021-10/16352115854080671.jpg',
          nickName: '秀瑶'
        },
      ]
    }
)
const {bookInfo, tabList, userList} = toRefs(reactiveData)
onMounted(() => {
  reactiveData.bookInfo = {
    bookCover: png1,
    bookName: '大灭绝时代：一部反常的自然史 (译文纪实)',
    classify: '译文纪实',
    score: '9.1',
    readVolume: '2.3',
    bookNumber: '11',
    author: '[美] 伊丽莎白·科尔伯特',
    honor: '自然科学记录  第六名',
    remark: '故事有十三个。前几个故事所涉及的美洲乳齿象、大海雀还有菊石已经灭绝了，这一部分主要介绍远古的大灭绝及其曲折的发现过程。第二部分陈列当下的事实，在日益支离破碎的亚马孙雨林中，在迅速变暖的安第斯山坡面，在大堡礁的外围海域里。\n' +
        '\n' +
        '巨变的范围是如此广大，只要在正确的指引之下，随便去哪里都能发现灭绝的现象。最后还有一个故事所讲述的灭绝差不多算是发生在我家后院——说不定，也同时发生在你家。随着故事的推进，读者也能像科学家一样渐渐意识到：当前发生的这一轮大灭绝，源头就在人类自己身上。'
  }
})
const openRead = () => {

}
const openListen = () => {
  router.push({path: '/listen-book'})
}

</script>

<style scoped lang="scss">
.book-detail {
}

.button-right {
  width: 64px;
  height: 24px;
  font-size: 12px;
  color: #1B1B21;
}

.user-image {
  height: 50px;
  margin: 0 auto;
  width: 50px;
  border-radius: 50%;
}

.read-book {
  width: 118px;
  height: 36px;
  line-height: 36px;
  background-color: rgba(27, 27, 33, 1);
  border-radius: 99px;
  text-align: center;
}
</style>
